@charset "UTF-8";

@import "_components/reset.scss";
@import "_components/_mixin.scss";
/**
 * 砍价团列表页
 * 
 * @author babel
 * @mail e23jiang@sina.com
 * @CreateDate 2016/1/2
 * 
 */

$rem:1rem/32;

.bg__full{
	background-size:contain;
	background-repeat:no-repeat;
}

.pull-right{
	float:right;
}
.pull-left{
	float:left;
}

.border-bottom{
	border-bottom:1px solid #dedede;
}
.group-bar{
	padding:0 $rem*20;
	font-size:$rem*30;
	color:#646464;
	height:$rem*100;
	line-height:$rem*100;
	background:#fff;
	border:0;
	&.borderBtm{
		border-bottom: 1px solid #dedede;
	}
	.detail{
		display: none;
	}
	.desc{
		display: block;
	}
	.hide{
		display: none;
	}
	&.fixed{
		border-bottom: 1px solid #dedede;
		position:fixed;
		left:0;
		top:0;
		width: 100%;
		z-index: 10;
		
		.detail{
			display: block;
		}
		.desc{
			display: none;
		}
	}
	&-wrapper{
		height: $rem*100;
	}
	small{
		font-size:$rem*24;
	}
	.iicon-arrow{
		&:before{
			width: $rem*16;
			height: $rem*16;
			border-color:#646464;
		}
	}
}

//团状态
.group-status{
	&:before{
		content: attr(data-status-text);
		position:absolute;
		width: $rem*118;
		height: $rem*118;
		border-radius:50%;
		border:1px solid #fff;
		right: $rem*22;
		top:$rem*22;
		color:#fff;
		font-size:$rem*30;
		text-align:center;
		box-sizing: border-box;
		line-height: 1.2;
		transform: rotate(-15deg);
		-webkit-transform: rotate(-15deg);
		z-index:3;
	}
	&_warning{
		&:before{
			background:#fe8a3c;
			line-height: $rem*118;
			box-shadow: 0 0 0 $rem*4 #fe8a3c;
		}
		
	}

	&_success{
		&:before{
			background:#d9343a;
			line-height: $rem*118;
			box-shadow: 0 0 0 $rem*4 #d9343a;
		}
		
	}

	&_fail{
		&:before{
			background:#9b9b9b;
			line-height: $rem*118;
			box-shadow: 0 0 0 $rem*4 #9b9b9b;
		}
	}

	&_gap{
		&:before{
			padding:$rem*20;
		}
	}

	&.shrink{
		&:before{
			line-height: 1.2;
			padding:$rem*20;
		}
	}
	
}
//
.pro-detail{
	background:#fff;
	position: relative;
	padding:$rem*30;
	.info{
		padding-right:$rem*348;

	}
	.country{
		color:#646464;
		font-size:$rem*24;
		margin-top: $rem*10;
		.flag{
			height: $rem*26;
			width: $rem*26;
			margin-right:$rem*10;
			display: inline-block;
			vertical-align: middle;
			@extend .bg__full;
		}
	}
	.name{
		font-size:$rem*34;
		color:#383838;
		//height: $rem*120;
		padding-bottom: $rem*15;
		border-bottom:1px solid #dedede;
		margin:$rem*20 0;
		line-height: 1.5;
		@include textOverFlow();
	}
	.pic{
		width: $rem*328;
		height:$rem*328;
		position:absolute;
		top:50%;
		right: $rem*20;
		background-position:center;
		-webkit-transform: translate(0,-50%);
		transform: translate(0,-50%);
		@extend .bg__full;
	}
	.condition{
		font-size:$rem*34;
		color:#c33;
		margin-bottom:$rem*8;
	}
	.price{
		@include clearfix();
		color:#c33;
		font-size:$rem*48;
		line-height: 1;
		.market-price{
			font-size: $rem*24;
			color:#9b9b9b;
			line-height: 1.2;
			padding:$rem*10 0 0 $rem*10;
		}
		strong{
			font-size:$rem*72;
		}
	}
	.total{
		font-size:$rem*24;
		color:#9b9b9b;
		margin-top: $rem*18;
		display: table;
	}
}

.load-over{
	font-size:$rem*24;
	color:#9b9b9b;
	text-align:center;
	height:$rem*40;
	margin:$rem*20 0;
	&>div{
		display: inline-block;
		width: $rem*200;
		border-bottom:$rem*4 dotted #dedede;
		height: $rem*20;
		span{
			padding:0 $rem*10;
			background: #e8e8e8;
		}
	}
}

.bottom-form-dialog{
	background:#fff;
	width:100%;
	.model-dialog-hd{
		background:#F8F8F8;
		height: $rem*90;
		line-height: $rem*90;
		color:#383838;
		text-align:center;
		padding:0 $rem*20;
		border-bottom:1px solid #dedede;
		.close-btn{
			color:#919396;
		}
	}
	.model-dialog-bd{
		padding:0 $rem*30;
		font-size:$rem*28;
		.form-row{
			position:relative;
		}
		.send-code-btn{
			position:absolute;
			font-size:$rem*26;
			right:0;
			top:50%;
			transform: translate(0,-50%);
			border-radius:$rem*6;
			min-width:$rem*220;
			padding:$rem*10 $rem*24;
		}
		input{
			padding:$rem*20 0;
			border-bottom:1px solid #dedede;
			width: 100%;
			margin-top: $rem*30;
			color:#646464;
			transition: border-color 0.25s ease-in-out;
			&::-webkit-input-placeholder{
				color:#CECECE;
			}
			&:focus{
				border-color:#c33;

			}
		}
		.confirm-btn{
			height: $rem*90;
			border-radius:$rem*8;
			margin-top: $rem*40;
		}
	}
	.model-dialog-ft{
		padding:$rem*40;
		.tips{
			font-size:$rem*24;
			text-align: center;
			span{
				display: inline-block;
			}
		}
	}
}

.rule-dailog{
	&.bottom{
		position:fixed;
		height: 100%;
		background:rgba(0,0,0,0);
	}
	& .model-dialog{
		&-hd,
		&-bd,
		&-ft{
			position:fixed;
			width: 100%;
			left:0;
		}
	}
	.model-dialog-hd{
		bottom:$rem*640;
	}
	.model-dialog-bd{
		bottom:$rem*90;
		background:#fff;
		height: $rem*550;
		padding: $rem*15;
		overflow-y:auto;
		@include clearfix;
		p{
			//解决字体放大问题，采用改变原有display值
			display: table;
		}
	}
	.model-dialog-ft{
		padding:0;
		left:0;
		bottom:0;
		&>button{
			height: $rem*90;
		}
	}
}
